<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
    #body{
	 width:300px;
	 height:300px;
	 border:solid 1px black;
	 margin:auto;
	 position:relative;
	}
	#div_1{
	  width:30px;
	  height:30px;
	  background-color:red;
	  margin-left:20px;
	  margin-top:50px;
	}
  </style>
 </head>
 <body>
    <div id="body">
	  <div id="div_1"><div>
	</div>
 </body>
  <script>
    var body = document.getElementById("body");
	var div_1 = document.getElementById("div_1");
	div_1.style.marginLeft = "100px";
	console.log(body.offsetWidth);
	console.log(body.offsetHeight);

	console.log(div_1.offsetWidth);
	console.log(div_1.offsetHeight);

	console.log(div_1.offsetLeft);
	console.log(div_1.offsetTop);
   
   document.addEventListener("keydown",function(evt){
       console.log(evt.keyCode);
   })
  </script>
</html>
